<template>
    <div>
        <a-form @keypress.enter="handleSearch">
            <flexbox align="flex-start">
                <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                    <a-select
                        :style="{ minWidth: item.width || '120px' }"
                        allowClear
                        :placeholder="item.placeholder"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'select'"
                    >
                        <a-select-option :key="elem.code" v-for="elem of item.setting">
                            {{ elem.dimensionName || elem.system }}
                        </a-select-option>
                    </a-select>
                    <h-dic-select
                        :type="item.type || item.field"
                        :title="item.title"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'dicSelect'"
                    />
                    <a-input
                        class="cell-item"
                        allowClear
                        :placeholder="item.placeholder"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'input'"
                    />
                </flexbox>
                <flexbox class="cell-item">
                    <HSuggestInput
                        allowClear
                        placeholder="请输入需求名称或编号"
                        v-model:value="searchKeyword"
                        style="max-width: 300px"
                        @change="handleSearch"
                    />
                </flexbox>
                <flexbox class="cell-item margin-r-16" style="min-width: 60px" v-if="fieldList.length + 1 > showFieldMaxNum">
                    <h-show-more-select
                        :options="fieldList.slice(showFieldMaxNum - 1)"
                        v-model:value="extendedSearchArr"
                        @change="handleExtendedSearchArrChange"
                    />
                </flexbox>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </a-form>
        <flexbox class="margin-t-8" v-if="extendedSearchArr.length">
            <flexbox class="cell-item" v-for="item of extendedSearchArr" :key="item">
                <h-range-picker-cell
                    :placeholder="item.placeholder"
                    :value="[
                        form.startTime ? $moment(form.startTime, 'YYYY-MM-DD') : null,
                        form.endTime ? $moment(form.endTime, 'YYYY-MM-DD') : null
                    ]"
                    @change="rangeDateChange"
                    v-if="item.formType === 'date'"
                />
                <h-dic-select
                    :type="item.type || item.field"
                    :title="item.title"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'dicSelect'"
                />
                <h-group-select
                    :type="item.type || item.field"
                    :title="item.title"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'selectGroup'"
                />
                <h-custom-select
                    :searchQuery="{ systemId: requestSystem, type: 2 }"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'customSelect'"
                />
                <close-circle-filled class="margin-l-8" style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" @click="handleDeleteSearchItem(item)" />
            </flexbox>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { HRangePickerCell, HCustomSelect, HDicSelect, HShowMoreSelect, HGroupSelect, HSuggestInput } from '@/components';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    components: {
        HRangePickerCell,
        CloseCircleFilled,
        HCustomSelect,
        HDicSelect,
        HShowMoreSelect,
        HGroupSelect,
        HSuggestInput
    },
    props: {
        system: {
            type: Number
        }
    },
    emits: ['search'],
    setup(props, { emit }) {
        const { saveHistory } = useSearchHistory();
        const form: any = ref({
            startTime: null,
            endTime: null,
            level: null,
            source: null,
            requestType: null,
            stage: null,
            status: null,
            pmpLabels: []
        });
        const fieldList = ref<any>([
            { field: 'requestType', title: '需求类型', formType: 'dicSelect' },
            { field: 'status', title: '状态', formType: 'dicSelect' },
            { field: 'level', title: '优先级', formType: 'dicSelect' },
            { field: 'startTime', placeholder: ['创建时间', '结束时间'], title: '创建时间', formType: 'date' },
            { field: 'stage', title: '需求阶段', formType: 'dicSelect' },
            { field: 'source', title: '需求来源', formType: 'dicSelect' },
            { field: 'pmpLabels', title: '标签', formType: 'customSelect' }
        ]);
        const showFieldMaxNum = ref<number>(4);
        const requestSystem = ref<any>(null);
        const searchKeyword = ref<string>('');
        const extendedSearchArr = ref<Recordable[]>([]);
        // 重置搜索条件
        const handleReset = () => {
            form.value = {
                startTime: null,
                endTime: null,
                level: null,
                source: null,
                requestType: null,
                stage: null,
                status: null,
                pmpLabels: []
            };
            searchKeyword.value = '';
        };
        const handleSearch = () => {
            emit('search', {
                ...unref(form),
                requestName: unref(searchKeyword) ? unref(searchKeyword).trim() : '',
                requestNumber: unref(searchKeyword) ? unref(searchKeyword).trim() : ''
            });
            if (unref(searchKeyword)) {
                saveHistory(unref(searchKeyword));
            }
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            form.value.startTime = startTime;
            form.value.endTime = endTime;
        };
        const handleDeleteSearchItem = (target: Recordable) => {
            const index = unref(extendedSearchArr).findIndex((item) => item.field === target.field);
            if (index >= 0) {
                if (target.field === 'startTime') {
                    form.value.startTime = null;
                    form.value.endTime = null;
                }
                if (form.value[target.field]) {
                    form.value[target.field] = null;
                }
                handleSearch();
                extendedSearchArr.value.splice(index, 1);
            }
        };
        // 用于清除更多里面所选项已选择的数据，因为只删除extendedSearchArr里所选项是不行的，还要删除对应所选项已选择的数据
        const handleExtendedSearchArrChange = (val) => {
            unref(fieldList)
                .slice(unref(showFieldMaxNum) - 1)
                .forEach((item) => {
                    if (val.length) {
                        const res = val.some((elem) => item.field === elem.field);
                        if (!res) {
                            form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                        }
                    } else {
                        form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                    }
                });
        };
        // watch(
        //     form,
        //     () => {
        //         handleSearch();
        //     },
        //     { deep: true }
        // );
        watch(
            () => props.system,
            (n) => {
                requestSystem.value = n;
            }
        );
        return {
            form,
            requestSystem,
            searchKeyword,
            fieldList,
            showFieldMaxNum,
            extendedSearchArr,
            handleSearch,
            handleReset,
            rangeDateChange,
            handleDeleteSearchItem,
            handleExtendedSearchArrChange
        };
    }
});
</script>
<style scoped lang="less">
@import (reference) '@/components/HCustomSelect/styles/index.less';
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>
